/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect, useRef } from 'react';

import styles from './index.less';

export default function Calibration(props) {
  const { direction, multiple } = props;
  const [calibrationLength, setCalibration] = useState({});
  const calibrationRef = useRef(null);

  useEffect(() => {
    let calibration = calibrationRef.current.getBoundingClientRect();
    setCalibration({ width: calibration.width, height: calibration.height });
    let length = direction === 'up' ? calibration.width : calibration.height;
    for (let i = 0; i < length / 5; i++) {
      if (i % 10 === 0) {
        generateElement(true, i);
      } else {
        generateElement();
      }
    }
  }, [direction]);

  const generateElement = (item, num) => {
    let createSpan = document.createElement('div');
    createSpan.className = 'calibrationLine';
    createSpan.style.backgroundColor = '#ccc';
    calibrationRef.current.style.display = 'flex';
    calibrationRef.current.style.justifyContent = 'space-between';
    if (direction === 'up') {
      calibrationRef.current.style.marginLeft = '50px';
      createSpan.style.width = '1px';
      createSpan.style.height = '6px';
      createSpan.style.display = 'inline-block';
    } else {
      calibrationRef.current.style.flexDirection = 'column';
      createSpan.style.height = '1px';
      createSpan.style.width = '6px';
    }
    if (item) {
      let createSpanContent = document.createElement('span');
      if (direction === 'up') {
        createSpan.style.height = '12px';
        createSpanContent.style.transform = 'translate3d(-4px, 20px, 0px)';
        createSpan.style.transform = 'translateY(0px)';
      } else {
        createSpan.style.width = '12px';
        createSpanContent.style.paddingLeft = '20px';
      }
      createSpanContent.style.display = 'block';
      createSpanContent.className = 'calibrationNumber';
      createSpanContent.innerHTML = num * 5;
      createSpan.appendChild(createSpanContent);
    }
    calibrationRef.current.appendChild(createSpan);
  };

  useEffect(() => {
    let width = calibrationLength.width
      ? calibrationLength.width
      : calibrationRef.current.getBoundingClientRect().width;
    let height = calibrationLength.height
      ? calibrationLength.height
      : calibrationRef.current.getBoundingClientRect().height;
    let arr = [...calibrationRef.current.querySelectorAll('.calibrationLine')];
    if (arr.length) {
      if (direction === 'up') {
        calibrationRef.current.style.width = multiple.toFixed(1) * width + 'px';
        arr.forEach(el => {
          let dom = [...el.querySelectorAll('.calibrationNumber')][0];
          if (dom) {
            dom.style.transform = `translate3d(-4px, 16px, 0px) scale(${(multiple + 0.1).toFixed(
              1,
            )})`;
          }
        });
      } else {
        calibrationRef.current.style.height = multiple.toFixed(1) * height + 'px';
        arr.forEach(el => {
          let dom = [...el.querySelectorAll('.calibrationNumber')][0];
          if (dom) {
            dom.style.transform = `translate3d(-4px, -8px, 0px) scale(${(multiple + 0.1).toFixed(
              1,
            )})`;
          }
        });
      }
    }
  }, [calibrationLength.height, calibrationLength.width, direction, multiple]);

  return <div className={styles.calibration} ref={calibrationRef}></div>;
}
